export default function triangle(){
    var canvas_triangle = document.getElementById('heter-triangle');
    var triangle_w = canvas_triangle.clientWidth;
    var triangle_h = canvas_triangle.clientHeight;
    var ctx_triangle = canvas_triangle.getContext('2d');
    canvas_triangle.width = triangle_w;
    canvas_triangle.height = triangle_h;
    ctx_triangle.width = triangle_w;
    ctx_triangle.height = triangle_h;
    ctx_triangle.fillStyle = 'rgba(0,0,0,0)';
    ctx_triangle.fillRect(0, 0, triangle_w, triangle_h);
    var triangle_px = triangle_w / 2 - 4, triangle_py = 4, triangle_dx = 1, triangle_dy = 0;
    var steep_x = 2, steep_y = triangle_h * 4 / triangle_w;
    function drawtriangle() {
        ctx_triangle.save();
        ctx_triangle.fillStyle = 'rgba(255,215,0,1)';
        ctx_triangle.fillRect(triangle_px, triangle_py, 4, 4);
        ctx_triangle.restore();
        ctx_triangle.save();
        ctx_triangle.fillStyle = 'rgba(1,15,75,0.1)';
        ctx_triangle.moveTo(triangle_w / 2, 0);
        ctx_triangle.lineTo(triangle_w, triangle_h);
        ctx_triangle.lineTo(0, triangle_h);
        ctx_triangle.fill();
        ctx_triangle.restore();
        if (triangle_dx == -1) {
            triangle_px -= steep_x;
        } else if (triangle_dx == 1) {
            triangle_px += steep_x;
        } else { }
        if (triangle_dy == -1) {
            triangle_py -= steep_y;
        } else if (triangle_dy == 1) {
            triangle_py += steep_y;
        } else { }

        if (triangle_py < triangle_h && triangle_px < triangle_w && triangle_px >= triangle_w / 2 - 4) {
            triangle_dx = 1;
            triangle_dy = 1;
        }
        if (triangle_py > triangle_h - 4) {
            triangle_py = triangle_h - 4;
            triangle_dy = 0;
            triangle_dx = -1;
        }
        if (triangle_py == triangle_h - 4 && triangle_px > 0) {
            triangle_dy = 0;
            triangle_dx = -1;
        }
        if (triangle_py == triangle_h - 4 && triangle_px <= 4) {
            triangle_px = 4
            triangle_dy = -1;
            triangle_dx = 1;
        }
        if (triangle_py < 0) {
            triangle_px = triangle_w / 2 - 4;
            triangle_py = 0;
            triangle_dy = 1;
            triangle_dx = 1;
        }

        requestAnimationFrame(drawtriangle);
    };
    drawtriangle();
}